In [1]:
import geopandas as gpd

import fiona
import geopandas as gpd
import matplotlib.pyplot as plt
#import folium
import folium
from folium import plugins
from folium.plugins import MeasureControl

import pandas as pd
import requests
import numpy as np
import pdvega # adds vgplot attribute to pandas
from vega import VegaLite

import json
import altair as alt
In [2]:
#open file geoJSON
bdl_geojson = r'Geospatial/bandarlampung/ADMINISTRASIKECAMATAN_AR_50K.geojson'
#buat gdf dari file GeoJSON
bdl_geogdf = gpd.read_file(bdl_geojson, driver='GeoJSON')

#open file json
bdl_json = r'Geospatial/bandarlampung/ADMINISTRASIKECAMATAN_AR_50K.json'
#buat gdf dari file json
bdl_gdf = gpd.read_file(bdl_json, driver='TopoJSON')

#Prepare GeoDataFrame for Altair

# dump as json
bdl_gdf_json = bdl_gdf.to_json()
# load as a GeoJSON object.
bdl_json_features = json.loads(bdl_gdf_json)
# parse variable `features` from json_features to `alt.Data`
bdl_data_geo = alt.Data(values=bdl_json_features['features'])
In [3]:
m = folium.Map(location=[-5.443251942283236, 105.27673629553274],
                    zoom_start=12,
                    tiles = 'Stamen Color',
                    attr = 'Esri',
                    name = 'Esri Satellite',
                    control_scale = True
                    ) 

def style_function(feature):
    NAMOBJ = str(feature['properties']['NAMOBJ'])
    return {
        'fillOpacity': 0.5,
        'weight': 0.5,
        'fillColor': '#005f73' if NAMOBJ == 'BUMIWARAS' \
                else '#0a9396'if NAMOBJ == 'ENGGAL'\
                else '#94d2bd'if NAMOBJ == 'GEDONGTATAAN'\
                else '#e9d8a6'if NAMOBJ == 'JATIAGUNG'\
                else '#ee9b00'if NAMOBJ == 'KATIBUNG'\
                else '#ca6702'if NAMOBJ == 'KEDAMAIAN'\
                else '#ae2012'if NAMOBJ == 'KEDATON'\
                else '#d00000'if NAMOBJ == 'KEMILING'\
                else '#2a9d8f'if NAMOBJ == 'LABUHANRATU'\
                else '#e9c46a'if NAMOBJ == 'LANGKAPURA'\
                else '#f4a261'if NAMOBJ == 'MERBAUMATARAM'\
                else '#e76f51'if NAMOBJ == 'NATAR'\
                else '#b5e48c'if NAMOBJ == 'PADANGCERMIN'\
                else '#ff006e'if NAMOBJ == 'PANJANG'\
                else '#8338ec'if NAMOBJ == 'RAJABASA'\
                else '#3a86ff'if NAMOBJ == 'SUKABUMI'\
                else '#fb5607'if NAMOBJ == 'SUKARAME'\
                else '#1b4332'if NAMOBJ == 'TANJUNGBINTANG'\
                else '#ffd60a'if NAMOBJ == 'TANJUNGKARANG BARAT'\
                else '#2f6690'if NAMOBJ == 'TANJUNGKARANG PUSAT'\
                else '#ccff33'if NAMOBJ == 'TANJUNGKARANG TIMUR'\
                else '#008000'if NAMOBJ == 'TANJUNGSENANG'\
                else '#ffff00'if NAMOBJ == 'TELUKBETUNG BARAT'\
                else '#00ffff'if NAMOBJ == 'TELUKBETUNG SELATAN'\
                else '#ff0000'if NAMOBJ == 'TELUKBETUNG TIMUR'\
                else 'brown'if NAMOBJ == 'TELUKBETUNG UTARA'\
                else 'blue'if NAMOBJ == 'WAYHALIM'\
                else 'orange'if NAMOBJ == 'WAYLIMA'\
        
                else 'red'
    }

# Add dark and light mode. 
folium.TileLayer('cartodbdark_matter',name="dark mode",control=True).add_to(m)
folium.TileLayer('cartodbpositron',name="light mode",control=True).add_to(m)

#highlight function
highlight_function = lambda x: {'fillColor': 'white', 
                                'color':'#000000', 
                                'fillOpacity': 0.20, 
                                'weight': 0.1}

gjson = folium.GeoJson(bdl_json_features, 
                        style_function=style_function,
                        highlight_function=highlight_function,
                        name="Administrasi Bandarlampung",
                        tooltip=folium.features.GeoJsonTooltip(
                        fields=['NAMOBJ','Shape_Area'],
                        aliases=['Nama','Luas Area'],
                        style=("background-color: white; color: #333333; font-family: arial; font-size: 12px; padding: 10px;") 
                        )
                      ).add_to(m)

#FOLIUM
#buat grafik
scatter = alt.Chart(bdl_data_geo).mark_bar(
    fill='lightgray',
    stroke='white'
).properties(
    projection={'type': 'albersUsa'},
    width=300,
    height=150
).encode(
    alt.Y('properties.Shape_Area:Q'),
    alt.X('properties.NAMOBJ:N'),
    alt.Color('properties.Shape_Area:Q')
)

vega = folium.features.VegaLite(
    scatter,
    width="100%",
    height="100%",
)

#buat marker
marker = folium.features.Marker([-5.443251942283236, 105.27673629553274]) #buat marker

popup = folium.Popup() #buat wadah popup

vega.add_to(popup) #tambahkan chart vega ke popup
popup.add_to(marker) #tambahkan popup ke marker

marker.add_to(m)

m.add_child(MeasureControl(position="topleft"))
#membuat minimap menjadi fullscreen
plugins.Fullscreen(position='topleft').add_to(m)

#menggambar/interaktif map
draw = plugins.Draw(
  export=True,
  position="topleft"
)
draw.add_to(m)

#untuk menampilkan lonlang
m.add_child(folium.LatLngPopup())

plugins.LocateControl().add_to(m)


# We add a layer controller. 
folium.LayerControl(collapsed=True).add_to(m)
m
Out[3]:
Make this Notebook Trusted to load map: File -> Trust Notebook
In [4]:
from branca.element import Template, MacroElement

template = """
{% macro html(this, kwargs) %}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <script>
  $( function() {
    $( "#maplegend" ).draggable({
                    start: function (event, ui) {
                        $(this).css({
                            right: "auto",
                            top: "auto",
                            bottom: "auto"
                        });
                    }
                });
});

  </script>
</head>
<body>

 
<div id='maplegend' class='maplegend' 
    style='position: absolute; z-index:9999; border:2px solid grey; background-color:rgba(255, 255, 255, 0.8);
     border-radius:6px; padding: 10px; font-size:14px; right: 20px; bottom: 20px;'>
     
<div class='legend-title'>Legend (draggable!)</div>
<div class='legend-scale'>
  <ul class='legend-labels'>
    <li><span style='background:red;opacity:0.7;'></span>Rendah</li>
    <li><span style='background:orange;opacity:0.7;'></span>Sedang</li>
    <li><span style='background:green;opacity:0.7;'></span>Luas</li>

  </ul>
</div>
</div>
 
</body>
</html>

<style type='text/css'>
  .maplegend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
    }
  .maplegend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
    }
  .maplegend .legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 2px;
    }
  .maplegend ul.legend-labels li span {
    display: block;
    float: left;
    height: 16px;
    width: 30px;
    margin-right: 5px;
    margin-left: 0;
    border: 1px solid #999;
    }
  .maplegend .legend-source {
    font-size: 80%;
    color: #777;
    clear: both;
    }
  .maplegend a {
    color: #777;
    }
</style>
{% endmacro %}"""

macro = MacroElement()
macro._template = Template(template)

m.get_root().add_child(macro)
Out[4]:
Make this Notebook Trusted to load map: File -> Trust Notebook